<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>住户管理</span>
      </div>
      <div>
        <div style="float: left">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="住户类型">
              <el-select v-model="identity" clearable placeholder="请选择">
                <el-option label="业主" value="业主"></el-option>
                <el-option label="亲戚" value="亲戚"></el-option>
                <el-option label="住户" value="住户"></el-option>
                 <el-option label="朋友" value="朋友"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div style="float: left; margin-left: 60px">
          <span class="">住户状态:</span
          ><el-input
            style="width: 300px"
            v-model="state"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div>
          <el-button style="float: right" type="primary">重置</el-button>
          <el-button
            style="float: right; margin-right: 30px"
            type="primary"
            @click="load"
            >查询</el-button
          >
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>住户列表</span>
        <div class="e2">
          <el-button
            type="primary"
            size="mini"
            style="margin-right: 10px"
            @click="addCommunity"
            >新建</el-button
          >
          <el-button type="primary" size="mini" style="margin-right: 10px"
            >批量操作</el-button
          >
        </div>
      </div>

      <div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            label="姓名"
            prop="users[0].userName"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="users[0].identity"
            label="类型"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="users[0].idCard"
            label="证件号码"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="users[0].phone"
            label="手机号码"
            show-overflow-tooltip
          >
          </el-table-column>
           <el-table-column
            prop="buildings[0].name"
            label="房间"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
                  <el-button type="text" @click="sh(scope.row)">审核</el-button>
              <!-- <el-button type="text" @click="update(scope.row)">编辑</el-button> -->
              <el-button type="text" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 编辑 -->
        <el-dialog title="楼座编辑" :visible.sync="dialogFormVisibleEdit">
            <el-form
          label-position="right"
          label-width="80px"
          :model="forms"
          style="width: 400px; margin-left: 20px; margin-top: 40px"
        >
          <el-form-item label="楼座名称">
            <el-input v-model="forms.howMany"></el-input>
          </el-form-item>
          <el-form-item label="房屋用途">
            <!-- <el-input v-model="forms.houseUse"></el-input> -->
             <el-select
                v-model="forms.houseUse"
                clearable
                placeholder="请选择"
              >
                <el-option label="普通住宅" value="普通住宅"></el-option>
                <el-option label="商业用地" value="商业用地"></el-option>
                <el-option label="商住两用" value="商住两用"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="建成日期">
            <el-date-picker
      v-model="forms.builtTime"
      type="datetime"
      placeholder="选择日期时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      >
    </el-date-picker>
            <!-- <el-input v-model="formLabelAlign.type"></el-input> -->
          </el-form-item>
          <el-form-item label="楼层数量">
             <el-input-number v-model="forms.totalFloor" @change="handleChange" :min="1" :max="30"> 
             </el-input-number>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="forms.remark"></el-input>
          </el-form-item>
        </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
            <el-button type="primary" @click="updatebuilding"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <div class="block">
          <div class="page">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-count="page.pages"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
        forms: {
        howMany:'',
        houseUse: "",
        builtTime: "",
        buildingSum: "",
        totalFloor:"",
        remark:"",
        buildingId:"",
      },
      
      identity: "",
      state: "",
      communityId:"",
      dialogFormVisibleEdit: false, // 用于用户编辑弹窗控制关闭
      // 分页字段
      page: {},
      tableData: [],
      multipleSelection: [],
    };
  },
  created() {
    //进入页面进行加载全查
    this.load();
  },
  methods: {
    load() {
      this.$axios
        .get("/serverzc/cell/findcell", {
          params: {
            communityId:localStorage.getItem("communityId"),
            identity: this.identity,
            state: this.state,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.page = res.data;
          this.tableData = this.page.list;
          for(var i =0;this.tableData.length;i++){
              var a=this.tableData[i].buildings[0].howMany+this.tableData[i].portal[0].howPortal
             this.tableData[i].buildings[0].name = a
          }

        });
    },
    handleCurrentChange(val) {
      this.$axios
        .get("/serverzc/cell/findcell", {
          params: {
            pagenow: val,
          },
        })
        .then((res) => {
          this.page = res.data;
          this.tableData = this.page.list;
        });
    },
    sh(row){
      this.$router.push({
        path: "/ps",
        query:{
          row
        }
      });
    },
    // 添加
    addCommunity() {
      this.$router.push({
        path: "/addResident",
      });
    },
    // 删除
    del(row) {
      console.log(row.middleId);
      this.$axios
        .get("/serverzc/cell/del?id=" + row.middleId)
        .then((res) => {
          this.load();
        });
    },
    // 修改
    update(row) {
      this.dialogFormVisibleEdit = true;
      this.forms.howMany = row.howMany
      this.forms.houseUse = row.houseUse
      this.forms.builtTime= row.builtTime
      this.forms.totalFloor= row.totalFloor
      this.forms.remark= row.remark
      this.forms.buildingId = row.buildingId
    },
    updatebuilding(){
      this.$axios
        .post("/serverzc/info/updatebuilding",this.forms)
        .then((res) => {
          this.dialogFormVisibleEdit= false,
          this.load();
        }); 
    },
  },
};
</script>

<style scoped>
</style>